<template>
  <div class="pivot">
    <a-row>
      <!-- ESG数据占比 -->
      <a-col :span="24">
        <h3>ESG数据提交占比</h3>
      </a-col>
    </a-row>
    <!-- GRI  SDG  SASB -->
    <a-row>
      <a-col :span="24" class="group-btn">
        <a-radio-group v-model="tabPosition" style="margin:8px">
          <a-radio-button value="GRI">
            GRI
          </a-radio-button>
          <a-radio-button value="SDG">
            SDG
          </a-radio-button>
          <a-radio-button value="SASB">
            SASB
          </a-radio-button>
        </a-radio-group>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="8">
        <!-- ESG数据提交占比1 -->
        <div class="echarts-pie">
          <a-row>
            <a-col :span="23" style='margin-right: 5px;'>
              <h3>ESG数据提交占比1</h3>
            </a-col>
          </a-row>
          <bar-chat :data="data" :widthProp="width" :heightProp="height"></bar-chat>
          <!-- <EchartsPie :data="data" :widthProp="width" :heightProp="height"></EchartsPie> -->
        </div>
      </a-col>
      <!-- ESG数据提交占比2 -->
      <a-col :span="8">
        <a-row>
          <a-col :span="23" style='margin-right: 5px;'>
            <h3>ESG数据提交占比2</h3>
          </a-col>
        </a-row>
        <RingChat :heightProp="height" :widthProp="width"></RingChat>
        <!-- <EchartsBubble :heightProp="height" :widthProp="width" /> -->
      </a-col>
      <!-- ESG数据提交占比3 -->
      <a-col :span="8">
        <a-row>
          <a-col :span="23" style='margin-right: 5px;'>
            <h3>ESG数据提交占比3</h3>
          </a-col>
        </a-row>
        <CakeShapeChat :heightProp="height" :widthProp="width"></CakeShapeChat>
        <!-- <EchartsRing :heightProp="height" :widthProp="width" /> -->
      </a-col>
    </a-row>
    <!-- GRI各个指标数据完成度分析 -->
    <a-row>
      <a-col :span="24" style='margin-right: 5px;'>
        <h3>GRI各个指标数据完成度分析</h3>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <ConeChat :heightProp="height" :widthProp="width"></ConeChat>
      </a-col>
      <a-col :span="8">
        <RingLeft :heightProp="height" :widthProp="width"></RingLeft>
      </a-col>
      <a-col :span="8">
        <RingRight :heightProp="height" :widthProp="width"></RingRight>
        <!-- <EchartsSemiRing :heightProp="height" :widthProp="width" /> -->
      </a-col>
    </a-row>
    <!-- GRI数据往年对比 -->
    <a-row>
      <a-col :span="24">
        <h3>GRI数据往年对比</h3>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <LineChat :heightProp="height" :widthProp="width"></LineChat>
        <!-- <EchartsLine :heightProp="height" :widthProp="width"></EchartsLine> -->
      </a-col>
      <a-col :span="12">
        <AreaChat :heightProp="height" :widthProp="width"></AreaChat>
        <!-- <EchartsArea :heightProp="height" :widthProp="width"></EchartsArea> -->
      </a-col>
    </a-row>

  </div>
</template>

<script>

import BarChat from './BarChat'
import RingChat from './RingChat'
import CakeShapeChat from './CakeShapeChat'
import ConeChat from './ConeChat'
import RingLeft from './RingLeft'
import RingRight from './RingRight'
import LineChat from './LineChat'
import AreaChat from './AreaChat'

export default {
  data() {
    return {
      height: '300px',
      width: '100%',
      data: [{
        value: 160,
        name: '资产一'
      },
      {
        value: 80,
        name: '资产二'
      },
      {
        value: 40,
        name: '资产三'
      }
      ],
      tabPosition: 'GRI'
    }
  },
  components: {
    BarChat,
    RingChat,
    CakeShapeChat,
    ConeChat,
    RingLeft,
    RingRight,
    LineChat,
    AreaChat
  },
  computed: {},
  methods: {}
}
</script>

<style lang="scss">
@import '@/assets/css/taskManagement.scss';
@import '@/assets/css/scrollbar.scss';

.pivot {
  padding: 0 15px;
  background-color: #fff;

  h3 {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    text-align: left;
  }

  .group-btn {
    padding: 10px 5px;
    text-align: left;
  }
}
</style>
